<template>
	<div class="indexContainer">
		<div class="index-con">

			<el-table :data="activityList" class="table-con">
				<el-table-column fixed prop="name" label="问题标题" width="200" />
				<el-table-column prop="create_time" label="提问时间" width="180" />
				<el-table-column prop="suggestion" label="问题详情" width="200" />
				<el-table-column label="处理进度" width="150">
					<template v-slot="scope">
						<el-text class="mx-1" type="defautl" v-if="scope.row.status === 0">未处理</el-text>
						<el-text class="mx-1" type="success" v-if="scope.row.status === 1">已处理</el-text>
						<el-text class="mx-1" type="primary" v-if="scope.row.status === 2">处理中</el-text>
					</template>
				</el-table-column>
				<el-table-column label="查看详情" width="150">
					<template v-slot="scope">
						<div @click="toActivity(scope.row)">
							<el-button type="default">查看</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination-block">
				<el-pagination :hide-on-single-page="isSinglePage" v-model:current-page="pageNo" v-model:page-size="pageSize"
					:small="small" :disabled="disabled" :background="background" layout="prev, pager, next, jumper"
					:total="totalPage" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
			</div>

		</div>
	</div>
</template>

<script setup lang="ts">
import router from '/@/router/index';
import { ref, onMounted } from 'vue'
import { useIndexApi } from '/@/api/index';

const activityList = ref([]);
const pageNo = ref(1);
const pageSize = ref(5)

const small = ref(false)
const background = ref(false)
const totalPage = ref(10);

const isSinglePage = ref(false)
const disabled = ref(false)
const handleSizeChange = (val: number) => {
	console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
	console.log(`current page: ${val}`)
}

let canFilter = true;
async function getActivity() {
	if (!canFilter) {
		return false;
	}
	canFilter = false;
	const res = await useIndexApi().myQuestion({});
	canFilter = true;
	if (res) {
		activityList.value = res.data.list
		// console.log(res.data)
	}

}


function toActivity(data) {
	router.push({ path: '/question/detail', query: { id: data.id } })
}


onMounted(() => {
	getActivity();
})


</script>
<style scoped lang="scss">
.indexContainer {
	width: 100%;
}

.table-con {
	width: 96%;
	margin: auto;
	height: calc(100% - 160px);

	.btns {
		height: 35px;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;

		.btn {
			width: 72px;
			height: 35px;
			line-height: 35px;
			border-radius: 2px;
			display: flex;
			color: #ffffff;
			background: rgb(233, 157, 66);
			align-items: center;
			justify-content: center;
			font-size: 14px;
			margin-right: 15px;
			cursor: pointer;

			&.no {
				background: rgb(187, 187, 187);
			}

			&+.btn {
				background: rgb(255, 191, 51);
			}
		}
	}
}

.pagination-block {
	margin-top: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}


.index-con {
	margin: 10px auto 0;
	padding-bottom: 50px;
	background: rgb(245, 245, 245);
}
</style>